<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Matrix - Responsive Tile-Based Template</title>
<link href="style.css" title="style" rel="stylesheet" type="text/css" />
<link id="clink" href="css/style-blue.css" title="style" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/MetroJs.lt.js" type="text/javascript"></script>
<script src="scripts/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/hoverintent.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/organictabs.jquery.js" type="text/javascript" charset="utf-8"></script>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<!--[if lt IE 9]>
  <style type="text/css">
  @import url("style-ie8.css");
  </style>
  <script src="scripts/css3-mediaqueries.js" type="text/javascript" charset="utf-8"></script>
  <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
    </script>
<![endif]-->
<!--[if IE 9]>
  <style type="text/css">
  @import url("style-ie9.css");
  </style>
<![endif]-->
<script src="scripts/javascript.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodypat">
<section id="container">
    <div id="colorchanger">
    <a href="?theme=blue" class="cblue cbox" title="Blue Theme"><span class="blue">Blue</span></a>
    <a href="?theme=red" class="cred cbox" title="Red Theme"><span class="red">Red</span></a>
    <a href="?theme=green" class="cgreen cbox" title="Green Theme"><span class="green">Green</span></a>
    <a href="?theme=magenta" class="cmagenta cbox" title="Magenta Theme"><span class="magenta">Magenta</span></a>
    <a href="?theme=purple" class="cpurple cbox" title="Purple Theme"><span class="purple">Purple</span></a>
    <a href="?theme=teal" class="cteal cbox" title="Teal Theme"><span class="teal">Teal</span></a>
    <a href="?theme=lime" class="clime cbox" title="Lime Theme"><span class="lime">Lime</span></a>
    <a href="?theme=brown" class="cbrown cbox" title="Brown Theme"><span class="brown">Brown</span></a>
    <a href="?theme=pink" class="cpink cbox" title="Pink Theme"><span class="pink">Pink</span></a>
    <a href="?theme=mango" class="cmango cbox" title="Mango Theme"><span class="mango">Mango</span></a>
    <h4>Theme Color Selector</h4>
    </div>
<!-- BEGIN HEADER -->
<header class="clearfix">
<!-- BEGIN LOGO -->
<a id="headerlink" href="#" title="home"><img id="logo" src="images/logo.png" alt="logo" /><span id="sitename">Matrix</span></a>
<!-- END LOGO -->

<!-- BEGIN NAVIGATION -->
<nav>
<ul id="nav" class="clearfix">
<!-- Menu Item 1 -->
	<li><a href="index.html" title="Home"><span>Home</span></a></li>
<!-- Menu Item 2 -->
    <li class="current">
    	<a href="#" title="Portfolio"><span>Portfolio</span></a>
        <ul>
        	<li><a href="portfoliotile-large.html" title="Portfolio"><span>Tile - Large</span></a></li>
            <li><a href="portfoliotile-medium.html" title="Portfolio"><span>Tile - Medium</span></a></li>
            <li><a href="portfoliotile-small.html" title="Portfolio"><span>Tile - Small</span></a></li>
            <li><a href="portfoliolist.html" title="Portfolio"><span>Portfolio List</span></a></li>
            <li><a href="singleportfolio.html" title="Portfolio"><span>Single Item</span></a></li>
        </ul>
    </li>
<!-- Menu Item 3 -->
    <li><a href="#" title="Blog"><span>Blog</span></a>
    	<ul>
        	<li><a href="blogtile-large.html" title="Blog"><span>Tile - Large</span></a></li>
            <li><a href="blogtile-medium.html" title="Blog"><span>Tile - Medium</span></a></li>
        	<li><a href="bloglist.html" title="Blog List"><span>Blog List</span></a></li>
        	<li><a href="singleblogpost-1.html" title="Article 1"><span>Single Post</span></a></li>
        </ul>
    </li>
<!-- Menu Item 4 -->
    <li>
    	<a href="#" title="Features"><span>Features</span></a>
        <ul>
        	<li><a href="features-main.html" title="Features"><span>Main Features</span></a></li>
            <li><a href="features-columns.html" title="Features"><span>Columns</span></a></li>
            <li><a href="features-content.html" title="Features"><span>Content Area</span></a></li>
        </ul>
    </li>
<!-- Menu Item 5 -->
    <li><a href="aboutus.html" title="About"><span>About</span></a></li>
<!-- Menu Item 6 -->
    <li><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END HEADER -->

<!-- BEGIN CONTENT -->
<section id="content" class="clearfix">
<!-- Title --><div id="content-title">Portfolio</div>

<!-- BEGIN SINGLE CONTENT -->
<section id="single">
    <article id="portfolio-1" class="spf-article">
    
    <div class="sgportfolio-img">
        <a href="images/portfolio/item1_full.png">
        <div class="enlarge"><div class="enlargeicon"></div></div>
        <img class="portfolio-fullimg" src="images/portfolio/item1_full.png" alt="Project One" />
        </a>
    </div>
    
    <h1 class="spf-title">Project One</h1>
    <span class="projectcat redtxt">Illustration</span>
    
    <!-- BEGIN POST CONTENT -->
    <div class="spf-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. <b>This image is a fantastic work by Mads Berg</a></b>.</p>
        <h2>Details of production</h2>
        <p>Duis fermentum, felis viverra venenatis laoreet, lectus ipsum egestas massa, at rutrum felis leo dictum orci. Nullam molestie erat sit amet libero sollicitudin rutrum. Cras luctus dignissim sapien, ac iaculis neque sodales vitae. Etiam at auctor velit. Mauris a ipsum non lectus venenatis adipiscing. Curabitur sodales vehicula porttitor. Vivamus vitae justo ut lacus posuere pretium eget non erat. Vivamus vulputate libero mi.</p>
        <img class="content-img" src="http://www.lorempixel.com/600/800/abstract" alt="Image Placeholder" />
        <p>Aliquam nec risus sapien. Sed sit amet magna est, molestie consequat libero. Maecenas venenatis, neque vel pellentesque lobortis, mauris diam molestie nibh, at tincidunt lacus arcu viverra quam. Praesent euismod libero a tortor congue sit amet cursus nisi egestas. Donec neque purus, luctus sed convallis vel, laoreet ut lacus. Ut elementum elementum eros molestie tincidunt. Sed vel ligula risus. Aliquam erat volutpat. Aliquam sit amet velit nulla, ac dignissim neque. Maecenas volutpat gravida nisl et convallis. Aliquam at egestas neque. Ut dapibus, justo quis elementum dictum, quam quam auctor dui, sed rutrum purus augue id enim. Donec dolor diam, commodo at vehicula a, lacinia eu ipsum. Nunc egestas, felis eu aliquet tincidunt, leo nulla luctus purus, et vehicula mauris massa sit amet odio. Morbi risus nibh, posuere sit amet porttitor in, mollis id arcu. Praesent vestibulum augue sed felis sagittis at convallis tellus sagittis.</p>
        
        <div class="portfolio-details clearfix">
            <div class="one-half">
            <h4>Client</h4>
            <p><a href="#">Company Name</a></p>
            </div>
            
            <div class="one-half last">
            <h4>Date</h4>
            <p>18 July 2012</p>
            </div>
        </div>
        
    </div><!-- end .spf-content -->
    <!-- END POST CONTENT -->
    </article>
    
<!-- BEGIN COMMENTS -->
<section id="comments">
<div class="section-title">4 Comments</div>

<ol class="commentlist">
<!-- Comment 1 -->
	<li class="comment">
    <article id="comment-1">
        <div class="comment-author"><img class="avatar" src="images/commenter.png" alt="Avatar" />
        	<a href="#"><span class="commenter">John Doe Jr.</span></a><a href="#commentform" class="comment-reply"><span class="button-met dark">Reply</span></a>
            <span class="comment-date">10 July 2012</span>
        </div>
        <div class="comment-content">
            <p>Duis fermentum, felis viverra venenatis laoreet, lectus ipsum egestas massa, at rutrum felis leo dictum orci. Nullam molestie erat sit amet libero sollicitudin rutrum. Cras luctus dignissim sapien, ac iaculis neque sodales vitae.</p>
        </div>
    </article>
    </li>
<!-- Comment 2 -->
    <li class="comment">
    <article id="comment-2">
        <div class="comment-author"><img class="avatar" src="images/commenter.png" alt="Avatar" />
        	<a href="#"><span class="commenter">John Doe Sr.</span></a><a href="#commentform" class="comment-reply"><span class="button-met dark">Reply</span></a>
            <span class="comment-date">10 July 2012</span>
        </div>
        <div class="comment-content">
            <p>Cras luctus dignissim sapien, ac iaculis neque sodales vitae.</p>
        </div>
    </article>
<!-- BEGIN COMMENT CHILDREN -->
    <ul class="children">
<!-- Comment 3 -->
    <li class="comment">
    <article id="comment-3">
        <div class="comment-author"><img class="avatar" src="images/commenter.png" alt="Avatar" />
        	<a href="#"><span class="commenter">John Doe Jr.</span></a><a href="#commentform" class="comment-reply"><span class="button-met dark">Reply</span></a>
            <span class="comment-date">10 July 2012</span>
        </div>
        <div class="comment-content">
            <p>Duis fermentum, felis viverra venenatis laoreet, lectus ipsum egestas massa, at rutrum felis leo dictum orci. Nullam molestie erat sit amet libero sollicitudin rutrum. Cras luctus dignissim sapien, ac iaculis neque sodales vitae.</p>
        </div>
    </article>
	</li>
<!-- Comment 4 -->
    <li class="comment">
    <article id="comment-4">
        <div class="comment-author"><img class="avatar" src="images/commenter.png" alt="Avatar" />
        	<a href="#"><span class="commenter">John Doe Sr.</span></a><a href="#commentform" class="comment-reply"><span class="button-met dark">Reply</span></a>
            <span class="comment-date">10 July 2012</span>
        </div>
        <div class="comment-content">
            <p>Duis fermentum, felis viverra venenatis laoreet, lectus ipsum egestas massa, at rutrum felis leo dictum orci. Nullam molestie erat sit amet libero sollicitudin rutrum.</p>
        </div>
    </article>
	</li>
    </ul>
<!-- END COMMENT CHILDREN -->
    </li><!-- end comment 2 -->
</ol>

<div id="respond">
<h1>Leave a reply</h1>
<form id="commentform" method="post" action="?" />
    <div id="commentformleft">
        <p class="comment-notes">
        Your email address will not be published. Required fields are marked *
        </p>
        <p class="comment-form-author">
        <input id="author" type="text" placeholder="Name *" name="author" />
        </p>
        <p class="comment-form-email">
        <input id="email" type="text" placeholder="Email *" name="email" />
        </p>
        <p class="comment-form-url">
        <input id="url" type="text" placeholder="Website" name="url" />
        </p>
    </div><div id="commentformright"><!-- must not leave space after </div> of #commentformleft -->
        <p class="comment-form-comment">
        <textarea id="comment" placeholder="Your commment" name="comment"></textarea>
        </p>
        <span class="button-met dark"><input id="comsubmit" type="submit" name="comsubmit" value="Post Comment" /></span>
    </div><!-- end #commentformright -->
</form>
</div><!-- end #respond -->

</section><!-- end #comments -->
<!-- END COMMENTS -->
</section><!-- end #single -->
<!-- END SINGLE CONTENT -->

<!-- BEGIN SIDEBAR -->
<section id="sidebar">

<div id="post-meta" class="widget">

<div class="tile-sidebar">
    <div class="meta1">
    <img src="images/sidebar-comm.png" alt="Comments" />
    <div class="count">4</div>
    <div class="comment-widget">
    <a href="#comments"><div class="comment-count">4</div></a>
    <a href="#respond"><div class="comment-quick-reply">Reply</div></a>
    </div>
    </div><!-- end .meta1 -->
</div><!-- end .tile-sidebar -->

<div class="tile-sidebar" style="background:#3b5998">
    <div class="meta2">
    <img src="images/sidebar-fb.png" alt="Facebook" />
    <div class="count"></div>    <div id="fb-root"></div>
    <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false" data-colorscheme="dark" data-font="segoe ui"></div>
    </div><!-- end .meta2 -->
</div><!-- end .tile-sidebar -->

<div class="tile-sidebar" style="background:#3cf">
    <div class="meta3">
    <img src="images/sidebar-twtr.png" alt="Twitter" />
    <div class="count"></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div><!-- end .meta3 -->
</div><!-- end .tile-sidebar -->

</div><!-- end post-meta -->

<div id="recent-box" class="widget">
<h5>Latest Articles</h5>
<ul class="articles-widget">
<li>
	<a href="singleblotpost-1.html">
	<img src="images/articles/article1_med.png" alt="Article 1" />
    <div class="title">This is the title of Article 1<br /><span class="redtxt">Illustration</span></div>
    <div class="more"></div>
    </a>
</li>
<li>
	<a href="singleblotpost-1.html">
	<img src="images/articles/article2_med.png" alt="Article 2" />
    <div class="title">This is the title of Article 2<br /><span class="limetxt">Cartoon Design</span></div>
    <div class="more"></div>
    </a>
</li>
<li>
	<a href="singleblotpost-1.html">
	<img src="images/articles/article3_med.png" alt="Article 3" />
    <div class="title">This is the title of Article 3<br /><span class="tealtxt">Graphic Design</span></div>
    <div class="more"></div>
    </a>
</li>
</ul>
</div><!-- end #recent-box -->

<div id="archive-box" class="widget">
<h5>Archive</h5>
<table id="archive">
<thead>
    <tr>
    	<th title="Monday" scope="col">M</th>
        <th title="Tuesday" scope="col">T</th>
        <th title="Wednesday" scope="col">W</th>
        <th title="Thursday" scope="col">T</th>
        <th title="Friday" scope="col">F</th>
        <th title="Saturday" scope="col">S</th>
        <th title="Sunday" scope="col">S</th>
    </tr>
</thead>
<tbody>
  <tr>
    <td class="none">&nbsp;</td>
    <td class="none">&nbsp;</td>
    <td class="none">1</td>
    <td class="none">2</td>
    <td class="red">3</td>
    <td class="teal">4</td>
    <td class="green">5</td>
  </tr>
  <tr>
    <td class="blue">6</td>
    <td class="none">7</td>
    <td class="lime">8</td>
    <td class="blue">9</td>
    <td class="green">10</td>
    <td class="red">11</td>
    <td class="none">12</td>
  </tr>
  <tr>
    <td class="blue">13</td>
    <td class="red">14</td>
    <td class="lime">15</td>
    <td class="teal">16</td>
    <td class="green">17</td>
    <td class="none">18</td>
    <td class="brown">19</td>
  </tr>
  <tr>
    <td class="teal">20</td>
    <td class="green">21</td>
    <td class="brown">22</td>
    <td class="blue">23</td>
    <td class="none">24</td>
    <td class="red">25</td>
    <td class="green">26</td>
  </tr>
  <tr>
    <td class="lime">27</td>
    <td class="lime">28</td>
    <td class="brown">29</td>
    <td class="none">30</td>
    <td class="green">31</td>
    <td class="none">&nbsp;</td>
    <td class="none">&nbsp;</td>
  </tr>
</tbody>
<tfoot>
	<tr>
    <td id="prev">&#8249;</td>
    <td id="month" colspan="5">August</td>
    <td id="next">&#8250;</td>
    </tr>
</tfoot>
</table>
</div><!-- end #archive-box -->

<div class="widget text-widget">
<h5>Text Widget</h5>
<p>Just some plain text, nothing special here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna.</p>
</div><!-- end .text-widget -->


<div id="twitter" class="widget">
<h5>Latest Tweets</h5>
<ul id="tweeter">
</ul>

</div><!-- end #twitter -->

</section>
<!-- END SIDEBAR -->
</section>
<!-- END CONTENT -->

<!-- BEGIN FOOTER -->
<footer class="clearfix">

<div id="footer-social">
<a href="#"><span class="behance-mini"></span></a>
<a href="#"><span class="twitter-mini"></span></a>
<a href="#"><span class="facebook-mini"></span></a>
<a href="#"><span class="linkedin-mini"></span></a>
<a href="#"><span class="pinterest-mini"></span></a>
<a href="#"><span class="dribbble-mini"></span></a>
</div><!-- end #footer-social -->

<small>&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></small>
</footer>
<!-- END FOOTER -->

</section><!-- end #container -->
</div>

</body>
</html>
